export default function CourseSection() {
  const courses = [
    {
      id: 1,
      title: "网络主播入门",
      description: "学习直播基础知识",
      price: 99,
      imageUrl: "/placeholder.svg?height=300&width=400",
    },
    {
      id: 2,
      title: "直播带货技巧",
      description: "掌握直播带货核心技巧",
      price: 199,
      imageUrl: "/placeholder.svg?height=300&width=400",
    },
    {
      id: 3,
      title: "直播合规指南",
      description: "了解直播行业政策法规",
      price: 49,
      imageUrl: "/placeholder.svg?height=300&width=400",
    },
  ]

  return (
    <section className="py-20">
      <div className="container mx-auto px-4">
        <h2 className="text-3xl font-bold text-center mb-12">热门课程</h2>
        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
          {courses.map((course) => (
            <div
              key={course.id}
              className="bg-white rounded-lg overflow-hidden shadow-sm hover:shadow-md transition-shadow"
            >
              <div className="relative h-[200px] bg-muted">
                {/*<Image
                  src={course.imageUrl || "/placeholder.svg"}
                  alt={course.title}
                  fill
                  className="object-cover"
                />*/}
              </div>
              <div className="p-6">
                <h3 className="text-xl font-bold mb-2">{course.title}</h3>
                <p className="text-gray-600 mb-4">{course.description}</p>
                <div className="flex justify-between items-center">
                  <span className="text-primary font-semibold">¥{course.price}</span>
                  <button className="px-4 py-2 bg-primary text-white rounded-md">立即报名</button>
                </div>
              </div>
            </div>
          ))}
        </div>
      </div>
    </section>
  )
}

